import cssVars from "./vars.module.scss";
import echarts from "echarts";
export default {
  data() {
    return {
      props: {
        line: {
          pro: {
            type: 'line',
            unit: '人次',
            showDetail: false,
            usedFormatter: 'defaultFormat',
            showYOY: true,
            showChain: true
          },
          basics: {
            type: 'line',
            unit: '人次',
            showDetail: false,
            usedFormatter: 'defaultFormat',
            showRito: true
          }
        },
        bar: {
          three: {
            usedFormatter: 'defaultFormat',
          }
        },
        pie: {
          basics: {}
        },
        map: {
          basics: {}
        }
      }
    }
  },
  computed: {},
  mounted() {

  },
  updated() {

  },
  methods: {
    $$line(props) {
      return {
        pro: (val) => {
          props = Object.assign({}, this.props.line.pro, props);
          let target = this.$$lineOption(props).pro();
          if (val) {
            target.xAxis[0].data = val.xLabel;
            if (Array.isArray(val.data)) {
              target.series = [];
              val.data.map((item, index) => {
                target.series.push({
                  name: item.name,
                  type: props.type,
                  symbol: "rect",
                  width: '10px',
                  showSymbol: false,
                  barWidth: 2,
                  barMinHeight: 3,
                  barGap: props.type === "bar" ? 1 : "",
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  },
                  itemStyle: {
                    normal: index
                      ? {
                        color: cssVars["chart-color3"]
                      }
                      : {
                        color: cssVars["chart-color1"],
                        borderColor: "rgba(234,203,153,0.27)"
                      }
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#edf4ff"
                        },
                        {
                          offset: 1,
                          color: "#FFFFFF"
                        }
                      ])
                    }
                  },
                  data: item.data
                });
              });
            }
          }
          return target;
        },
        basics: (val) => {
          props = Object.assign({}, this.props.line.basics, props);
          let target = this.$$lineOption(props).basics();
          if (val) {
            target.xAxis[0].data = val.xLabel;
            if (Array.isArray(val.data)) {
              target.series = [];
              val.data.map((item, index) => {
                target.series.push({
                  name: item.name,
                  type: props.type,
                  symbol: "circle",
                  symbolSize: 5,
                  showSymbol: false,
                  barWidth: 2,
                  barMinHeight: 3,
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  },
                  itemStyle: {
                    normal: index
                      ? {
                        color: cssVars["chart-color2"]
                      }
                      : {
                        color: cssVars["chart-color1"],
                        borderColor: "rgba(234,203,153,0.27)",
                        borderWidth: props.type === "line" ? 12 : ""
                      }
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#1c151d"
                        },
                        {
                          offset: 1,
                          color: "#090613"
                        }
                      ])
                    }
                  },
                  data: item.data
                });
              });
            }
          }
          return target;
        }
      }
    },
    $$lineOption(props) {
      return {
        pro: () => {
          return {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#215EE8"
                }
              },
              /* formatter: function (e, t, n) {
                return e[0].name + "：" + e[0].value
              } */
            },
            grid: {
              left: '2%',
              right: '2%',
              bottom: '3%',
              top: '10%',
              containLabel: true
            },
            legend: {
              show: true,
              right: 0,
              itemWidth: 10
            },
            xAxis: [
              {
                type: "category",
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: cssVars["color-text-placeholder"]
                  }
                },
                axisLabel: {
                  margin: 18,
                  height: 24,
                  color: '#A7AEB6'
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: "#E8E8E8"
                  }
                },
                data: []
              }
            ],
            yAxis: [
              {
                type: "value",
                axisTick: {
                  show: false
                },
                splitNumber: 2,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: cssVars["color-text-placeholder"]
                  }
                },
                axisLabel: {
                  inside: true,
                  margin: 0,
                  color: '#CFCFCF',
                  textStyle: {
                    fontSize: 10
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#E8E8E8"
                  }
                }
              }
            ],
            series: [],
            animationDuration: 800
          }
        },
        basics: () => {
          return {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#57617B"
                }
              },
              padding: 0,
              formatter: this.$$lineFormatter(props).basics()[props.usedFormatter]
            },
            grid: {
              left: "2%",
              right: "2%",
              bottom: "3%",
              top: "30%",
              containLabel: true
            },
            xAxis: [
              {
                type: "category",
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: cssVars["color-text-placeholder"]
                  }
                },
                axisLabel: {
                  margin: 18,
                  height: 24
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: "#262524"
                  }
                },
                data: []
              }
            ],
            yAxis: [
              {
                type: "value",
                axisTick: {
                  show: false
                },
                splitNumber: 2,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: cssVars["color-text-placeholder"]
                  }
                },
                axisLabel: {
                  inside: true,
                  margin: 0,
                  textStyle: {
                    fontSize: 10
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: "#262524"
                  }
                }
              }
            ],
            series: [],
            animationDuration: 800
          }
        }
      }
    },
    $$lineFormatter(props) {
      return {
        pro: () => {
          return {
            defaultFormat: (params) => {
              const itemFormat = params.map((item, index) => {
                return `
                                  <div class="line-${index}">
                                    <span class="rect-${index}"></span>
                                    <span style="display: inline-block;vertical-align:middle;">
                                      ${params[index].name} ${props.showDetail ? params[index].axisValueLabel : ""} :${props.unit === "人次" ? parseFloat(params[index].value).toLocaleString() : params[index].value}${props.unit}
                                    </span>
                                  </div>
                                `;
              });
              const divideItem = () => {
                if (params.length <= 1) return ``;
                const YOY = `
                                <span>同比：
                                    <span style="color:${cssVars[params[0].data.same >= 0 ? "color-danger" : "color-success"]}">
                                        ${params[0].data.same !== null ? (params[0].data.same * 100).toFixed(2) + "%" : "-"}
                                        ${params[0].data.same > 0 ? "&#8593;" : params[0].data.same === null ? "" : "&#8595;"}
                                    </span>
                                </span>`;
                const chain = `
                                <span>&nbsp;环比：
                                    <span style="color: ${cssVars[params[0].data.sequential >= 0 ? "color-danger" : "color-success"]}">
                                          ${params[0].data.sequential !== null ? (params[0].data.sequential * 100).toFixed(2) + "%" : "-"}
                                          ${params[0].data.sequential > 0 ? "&#8593;" : params[0].data.sequential === null ? "" : "&#8595;"}
                                    </span>
                                </span>`;
                return `<div class="divide">
                                            ${props.showYOY ? YOY : ""}
                                            ${props.showChain ? chain : ""}
                                        </div>`;
              };
              itemFormat.splice(1, 0, divideItem());
              return `<div class="chart-tips">${itemFormat.join("")}</div>`;
            },
            customFormat: (params) => {
              const itemFormat = params.map((item, index) => {
                return `
                                  <div class="line-${index}">
                                    <span class="rect-${index}"></span>
                                    <span style="display: inline-block;vertical-align:middle;">
                                      ${params[index].name} ${props.showDetail ? params[index].axisValueLabel + ": " : ""
                  } :${props.unit === "人次"
                    ? parseFloat(params[index].value).toLocaleString()
                    : params[index].value
                  }${props.unit}
                                    </span>
                                        <div class="divide">环比：
                                        <span style="color: ${cssVars[
                  params[index].data.sequential >= 0
                    ? "color-danger"
                    : "color-success"
                  ]
                  }">
                                          ${params[index].data.sequential
                    ? (
                      params[index].data
                        .sequential * 100
                    ).toFixed(2) + "%"
                    : "-"
                  }
                                          ${params[index].data.sequential > 0
                    ? "&#8593;"
                    : params[index].data
                      .sequential === 0
                      ? ""
                      : "&#8595;"
                  }
                                        </span>
                                      </div>
                                  </div>
                                `;
              });
              return `
                                <div class="chart-tips">
                                  ${itemFormat.join("")}
                                </div>
                              `;
            }
          }
        },
        basics: () => {
          return {
            defaultFormat: (params) => {
              return `
                                <div class="chart-tips">
                                  <div class="line-one">
                                    <span style="display: inline-block;margin-right:8px;vertical-align:middle;width: 8px;height: 2px;background: #b6a284;"></span>
                                    <span style="display: inline-block;vertical-align:middle;">
                                    ${params[0].data.year} ${props.showDetail ? params[0].axisValueLabel : " "
                }:
                                      ${props.unit === "人次"
                  ? parseFloat(
                    params[0].value
                  ).toLocaleString()
                  : params[0].value
                }${props.unit}
                                  </div>
                                  ${props.showRito
                  ? `<div style="padding-left:16px;line-height: 24px;font-size: 12px;color: #807C78;">
                                <div>
                                <span>&nbsp;环比：
                                <span style="color: ${cssVars[
                  params[0].data.sequential >= 0
                    ? "color-danger"
                    : "color-success"
                  ]
                  }">${params[0].data.sequential
                    ? (
                      params[0].data.sequential * 100
                    ).toFixed(2) + "%"
                    : "-"
                  } ${params[0].data.sequential > 0
                    ? "&#8593;"
                    : params[0].data.sequential === 0
                      ? ""
                      : "&#8595;"
                  }</span>
                                </span>
                                </div>
                                </div>`
                  : ""
                }
                                </div>
                                `;
            }
          }
        }
      }
    },
    $$bar(props) {
      return {
        three: (val) => {
          props = Object.assign({}, this.props.bar.three, props);
          let target = this.$$barOption(props).three();
          if (val) {
            target.xAxis[0].data = val.xLabel && val.xLabel;
            target.legend.data = val.data && val.data.map(item => item.name);
            if (Array.isArray(val.data)) {
              target.series = [];
              val.data.map(item => {
                target.series.push({
                  data: item.data,
                  name: item.name,
                  year: item.year,
                  stack: "one",
                  type: "bar",
                  barWidth: 2,
                  label: {
                    show: false
                  },
                  barMinHeight: 1 // 设置柱状图最小高度为1
                });
              });
            }
          }
          return target;
        }
      }
    },
    $$barOption(props) {
      return {
        three: () => {
          return {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#57617B"
                }
              },
              padding: 0,
              formatter: this.$$barFormatter(props).three()[props.usedFormatter]
            },
            color: [
              cssVars["chart-color1"],
              cssVars["chart-color2"],
              cssVars["chart-color3"],
              cssVars["chart-color4"],
              cssVars["chart-color5"]
            ],
            legend: {
              data: ["1天", "2天", "3天", "4天", "5天及以上"],
              itemGap: 10,
              itemWidth: 6,
              itemHeight: 6,
              left: 0,
              top: 12,
              textStyle: {
                fontSize: 12,
                color: "#807C78"
              }
            },
            grid: {
              left: "2%",
              right: "2%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#595654"
                  }
                },
                axisLabel: {
                  margin: 18,
                  height: 24
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262524"
                  }
                },
                data: []
              }
            ],
            yAxis: [
              {
                type: "value",
                axisLine: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                }
              }
            ],
            series: []
          }
        }
      }
    },
    $$barFormatter(props) {
      return {
        three: () => {
          return {
            defaultFormat: (params) => {
              const itemStyle = `display: flex; align-items: center;`;
              const pointStyle = `width: 5px; height: 5px; margin-right: 10px;`;
              const labelStyle = `font-size: 14px; color: ${cssVars["color-text-regular"]
                }; line-height:20px; margin-right: 10px;`;
              const fro = params
                .map(item => {
                  return `
                              <div style="${itemStyle}">
                                <span style="${pointStyle} background-color: ${item.color
                    }"></span>
                                <span style="width:80px">${item.seriesName
                    }</span>
                                <span style="${labelStyle}">${item.data.value
                    }%</span>
                              </div>
                              `;
                })
                .join("");
              return `
                            <div class="tootips">
                            <p>${params[0].data.name}</p>
                            ${fro}
                            </div>
                          `;
            }
          }
        }
      }
    },
    $$pie(props) {
      return {
        basics: (val) => {
          props = Object.assign({}, this.props.pie.basics, props);
          let target = this.$$pieOption(props).basics();
          if (val) {
            // 获取中心展示文本
            const maxValue = Math.max(...val.map(item => item.value));
            const maxItem = val.find(item => item.value === maxValue);

            if (maxItem) {
              target.title.text = maxItem.name || "";
              target.title.subtext = maxItem.percent.toFixed(2) + "%" || "";
            }

            // 计算间距值
            let totalValue = 0;
            val.map(item => (totalValue += item.value));
            const x = totalValue / (val.length * 50);
            let pieGap = this.$$pieOption().pieGap();
            pieGap.value = x;

            let data = [];
            for (let item of val) {
              data = data.concat([item, pieGap]);
            }
            target.series[0].data = data;
          }
          return target;
        }
      }
    },
    $$pieOption(props) {
      return {
        basics: () => {
          return {
            title: {
              text: "",
              subtext: "",
              x: "center",
              y: "28%",
              textStyle: {
                color: cssVars["color-text-primary"],
                fontSize: 18,
                lineHeight: 28
              },
              subtextStyle: {
                fontSize: 32,
                fontWeight: "normal",
                color: ["#676767"]
              }
            },
            color: [
              cssVars["chart-color1"],
              cssVars["chart-color2"],
              cssVars["chart-color3"],
              cssVars["chart-color4"],
              cssVars["chart-color5"]
            ],
            series: [
              {
                name: this.title,
                type: "pie",
                radius: ["72%", "84%"],
                /* itemStyle: {
                  borderRadius: 20,
                  borderColor: '#fff',
                  borderWidth: 2
                }, */
                hoverAnimation: false,
                label: {
                  normal: {
                    show: false
                  },
                  emphasis: {
                    show: false
                  }
                },
                data: []
              }
            ]
          }
        },
        pieGap: () => {
          return {
            value: 10,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0
              }
            }
          }
        }
      }
    },
    $$pie2(props) {
      return {
        basics: (val) => {
          props = Object.assign({}, this.props.pie.basics, props);
          let target = this.$$pieOption2(props).basics();
          if (val) {
            console.log(val);
            // 获取中心展示文本
            /* const maxValue = Math.max(...val.map(item => item.value));
            const maxItem = val.find(item => item.value === maxValue);

            if (maxItem) {
              target.title.text = maxItem.name || "";
              target.title.subtext = maxItem.percent.toFixed(2) + "%" || "";
            } */

            target.series[0].data = val;
          }
          return target;
        }
      }
    },
    $$pieOption2(props) {
      return {
        basics: () => {
          return {
            title: {
              text: "",
              subtext: "",
              x: "center",
              y: "38%",
              textStyle: {
                color: cssVars["color-text-primary"],
                fontSize: 20,
              },
              subtextStyle: {
                fontSize: 28,
                fontWeight: "normal",
                color: ["#676767"],
                lineHeight: '35',
              }
            },
            color: [
              '#5470c6',
              '#91cc75',
              '#fac858',
              '#ee6666',
              '#73c0de',
              '#3ba272',
              '#fc8452',
              '#9a60b4',
            ],
            series: [
              {
                name: this.title,
                type: 'pie',
                radius: [25, 110],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                  borderRadius: 2
                },
                label: {
                  show: false,
                  position: 'center',
                },
                emphasis: {
                  label: {
                    show: true,
                    formatter(params) {
                      return `{nameStyle|${params.name}}`
                      // return `{nameStyle|${params.name}}\n{percentStyle|${params.percent}%}`
                    },
                    rich: {
                      nameStyle: {
                        fontSize: '14',
                        fontWeight: 'bold',
                        lineHeight: '35',
                        color: '#676767',
                        // color: '#a7aeb6',
                      },
                      percentStyle: {
                        fontSize: '28',
                        lineHeight: '45',
                        color: '#676767',
                      }
                    },
                  },
                },
                data: []
              },
            ]
          }
        },
      }
    },
    $$map(props) {
      return {
        basics: (val) => {
          props = Object.assign({}, this.props.map.basics, props);
          let target = this.$$mapOption(props).basics();
          if (val) {
            target.series[0].data = val;
          }
          return target;
        }
      }
    },
    $$mapOption(props) {
      return {
        basics: () => {
          let step = Math.ceil(props.total / 3);
          return {
            tooltip: {
              formatter: function (e, t, n) {
                return `<div>${e.name} 
                        <div style='color: #ddd'>总预约数：<span style='color: #90caf9'>${e.data.value}</span></div>
                        <div style='color: #ddd'>总入园数：<span style='color: #fcb108'>${e.data.scanNum}</span></div>
                      </div>`
              },
              backgroundColor: 'rgba(0,0,0,.7)',
              /* borderColor: '#efefef',
              borderWidth: '0.05', */
            },
            visualMap: {
              type: 'piecewise',
              min: 0,
              max: 1000,
              left: 0,
              bottom: 0,
              showLabel: !0,
              orient: 'horizontal',
              //text: ["高", "低"],
              pieces: [
                {
                  gt: step * 2,
                  label: "> " + step * 2,
                  color: "#215EE8"
                }, {
                  gte: step,
                  lt: step * 2,
                  label: step + "-" + step * 2,
                  color: "#5D8FFF"
                }, {
                  gte: 0,
                  lt: step,
                  label: "0-" + step,
                  color: "#A8C2FD"
                }
              ],
              show: false
            },
            geo: {
              map: "cityJson",
              roam: false,
              scaleLimit: {
                min: 1,
                max: 2
              },
              zoom: 1.10,
              top: 40,
              label: {
                normal: {
                  show: true,
                  fontSize: "10",
                  color: "#ffffff"
                },
                emphasis: {
                  color: "#ffffff"
                }
              },
              itemStyle: {
                normal: {
                  //shadowBlur: 50,
                  //shadowColor: 'rgba(0, 0, 0, 0.2)',
                  borderColor: "rgba(0, 0, 0, 0.2)"
                },
                emphasis: {
                  areaColor: "#FDB000",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  borderWidth: 0
                }
              }
            },
            series: [{
              name: "用户省级分布情况",
              type: "map",
              geoIndex: 0,
              data: []
            }]
          }
        }
      }
    },
  }
}
